<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red}
    </style>
</head>
<body>
    <div class="box">
        <p>段落1</p>
        <p class="red">段落2</p>
        <h3>标题1</h3>
        <h3 class="red">标题2</h3>
        <p class="red">段落3</p>
        <h3>标题4</h3>
        <p>段落4</p>
        <h3 class="red">标题3</h3>
    </div>
</body>
<script src="../jquery.js"></script>
<script>

    // DOM2：监听式绑定：可以重复绑定

    // 1. 常规绑定：将原生的事件名作为方法名，使用
        // 并不是所有事件都能这么绑定
    // $(".box").click(function(){
    //     console.log(1)
    // })
    // $(".box").click(function(){
    //     console.log(2)
    // })
    // $(".box").click(function(){
    //     console.log(3)
    // })

    // 2. 使用on绑定，使用off删除
    // $(".box").on("click.a",function(){
    //     console.log(1)
    // })
    // $(".box").on("click.b",function(){
    //     console.log(2)
    // })
    // $(".box").on("click.c",function(){
    //     console.log(3)
    // })
    // $(".box").off("click.b")

    // $(".box").on("click", "p",function(){
    //     console.log(3)
    // })
    // $(".box").on("click", "h3",function(){
    //     console.log(3)
    // })
    // $(".box").on("click", ".red",function(){
    //     console.log(3)
    // })

    // 3. 使用bind绑定（新版本被废弃，被on替代了）
    // $(".box").bind("click.a", function(){
    //     console.log(1)
    // })
    // $(".box").bind("click.b", function(){
    //     console.log(2)
    // })
    // $(".box").bind("click.c", function(){
    //     console.log(3)
    // })

    // $(".box").unbind("click.b")

    // 4. one绑定：一次性事件
    // $(".box").one("click", function(){
    //     console.log(1)
    // })

    // 5. hover绑定：鼠标进入+离开
    // $(".box").hover(function(){
    //     console.log("进入enter")
    // },function(){
    //     console.log("离开leave")
    // })

    // 6......(查文档)
    



</script>
</html>